<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 1rem"></el-header>
      <el-container>
        <el-aside :width="openemnu ? '70px' : '200px'">
          <el-menu
            class="el-menu-vertical-demo"
            :collapse="openemnu"
            :default-active="itempath"
            :router="true"
            style="text-align: right"
          >
            <el-button
              link
              @click="open()"
              :class="{ 'rotate-180': openemnu }"
              style="margin-right: 1rem"
              ><el-icon :size="22"><Fold /></el-icon
            ></el-button>
            <el-menu-item index="/adminpc/site">
              <el-icon><icon-menu /></el-icon>
              <template #title>概览</template>
            </el-menu-item>
            <el-menu-item index="/adminpc/account">
              <el-icon><User /></el-icon>
              <template #title>账号管理</template>
            </el-menu-item>
            <el-menu-item index="/adminpc/bbs">
              <el-icon><Notification /></el-icon>
              <template #title>帖子管理</template>
            </el-menu-item>
            <el-menu-item index="/adminpc/mod">
              <el-icon><document /></el-icon>
              <template #title>资源管理</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/role">
              <el-icon><Medal /></el-icon>
              <template #title>头衔列表管理</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/category">
              <el-icon><Position /></el-icon>
              <template #title>板块列表管理</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/server">
              <el-icon><IconServer /></el-icon>
              <template #title>服务器列表管理</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/version">
              <el-icon><Notification /></el-icon>
              <template #title>游戏版号</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/log">
              <el-icon><Document /></el-icon>
              <template #title>后台日志</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/motd">
              <el-icon><setting /></el-icon>
              <template #title>游戏公告设置</template>
            </el-menu-item>

            <el-menu-item index="/adminpc/invite" disabled>
              <el-icon><CirclePlus /></el-icon>
              <template #title>邀请码</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main
          style="height: calc(100vh - 5rem); overflow-y: hidden; padding: 8px"
        >
          <KeepAlive include="admin-pc-account">
            <router-view v-if="$route.meta.keepAlive" />
          </KeepAlive>
          {{ $route.meta.keepAlive }}
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
import IconServer from '@comps/icons/mod/server.vue'
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const itempath = ref(route.path)
const openemnu = ref(true)

// 展开菜单，同时让这个按钮旋转180度
const open = () => {
  openemnu.value = !openemnu.value
}

watch(
  () => route.path,
  () => {
    itempath.value = route.path
  },
)
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh - 5rem);
  overflow-x: hidden;
}
.transform {
  transition: transform 0.3s ease;
}
.rotate-180 {
  transform: rotate(180deg);
}
</style>
